<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Java后端WebSocket的Tomcat实现</title>
<link rel="stylesheet" href="assets/css/danmuplayer.css">
<script src="assets/js/lib/jquery-1.11.1.min.js"></script>
<script src="assets/js/danmuplayer.js"></script>
</head>
<body>
	Welcome
	<br />
	<div id="danmup"></div>
	<div style="display: none;">
		<input id="text" type="text" />
		<button onclick="send()">发送消息</button>
		<hr />
		<button onclick="closeWebSocket()">关闭WebSocket连接</button>
		<hr />
	</div>
	<div id="message"></div>
</body>

<script type="text/javascript">
	
	$("#danmup").DanmuPlayer({
		src : "http://hk.realjinge.com:8080/pgone.mp4", //视频源文件
		width : 720, //播放器的宽度,最小宽度支持为720
		height : 480, //播放器的高度
		//speed : 20000, //弹幕速度，这是数值指的是视频穿过672像素所需要的毫秒数
		//sumTime : 65535, //弹幕视频的总时间，可不填。
		//danmuList : {}, //弹幕列表
		//defaultColor : "#ffffff", //弹幕的默认字体颜色
		//fontSizeSmall : 16, //小弹幕的字号
		//FontSizeBig : 24, //大弹幕的字号
		//opacity : "1", //弹幕默认透明度
		//topBottonDanmuTime : 6000, //底部及顶部弹幕存留的时间
		urlToGetDanmu : "http://realjinge.easy.echosite.cn/websocket/getDanmu", //用来接收弹幕信息的url
		urlToPostDanmu : "http://realjinge.easy.echosite.cn/websocket/saveDanmu", //用来存储弹幕信息的url
		//maxCountInScreen : 40, //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的
		//maxCountPerSec : 10	//每分秒秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的
	});

	/*
	$("#danmup .danmu-div").danmu("addDanmu", [ {
		text : "这是滚动弹幕",
		color : "white",
		size : 1,
		position : 0,
		time : 2
	}, {
		text : "这是顶部弹幕",
		color : "yellow",
		size : 1,
		position : 1,
		time : 3
	}, {
		text : "这是底部弹幕",
		color : "red",
		size : 1,
		position : 2,
		time : 3
	} ]);
	*/

	var websocket = null;
	//判断当前浏览器是否支持WebSocket
	if ('WebSocket' in window) {
		websocket = new WebSocket("ws://realjinge.easy.echosite.cn/websocket/websocket");
	} else {
		alert('当前浏览器 Not support websocket')
	}

	//连接发生错误的回调方法
	websocket.onerror = function() {
		setMessageInnerHTML("WebSocket连接发生错误");
	}

	//连接成功建立的回调方法
	websocket.onopen = function() {
		setMessageInnerHTML("WebSocket连接成功");
	}

	//接收到消息的回调方法
	websocket.onmessage = function(event) {
		setMessageInnerHTML(event.data);
	}

	//连接关闭的回调方法
	websocket.onclose = function() {
		setMessageInnerHTML("WebSocket连接关闭");
	}

	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	window.onbeforeunload = function() {
		closeWebSocket();
	}

	//将消息显示在网页上
	function setMessageInnerHTML(innerHTML) {
		if (null != innerHTML && '' != innerHTML && innerHTML.length > 0) {
			var time = $(".danmu-div").data("nowTime") + 3;
			//console.log(time);
			/*
			var json = JSON.parse(innerHTML);
			var msg = json.text;
			console.log(msg);
			*/
			var idVal;
			if (innerHTML.indexOf('##USERID_') != -1) {
				idVal = innerHTML.substring(innerHTML.indexOf('##USERID_') + 9);
				innerHTML = innerHTML.substring(0, innerHTML.indexOf('##USERID_'));
				console.log(innerHTML);
				console.log(idVal);
			}
			var id = '<%=request.getSession().getId()%>';
			
			if (id != idVal) {
				var aDanmu = {
					text : innerHTML,
					color : "white",
					size : 1,
					position : 0,
					time : time
				};
	
				$("#danmup .danmu-div").danmu("addDanmu", [ aDanmu ]);
			}
		}

		document.getElementById('message').innerHTML += innerHTML + '<br/>';
	}

	//关闭WebSocket连接
	function closeWebSocket() {
		websocket.close();
	}

	//发送消息
	function send() {
		var message = document.getElementById('text').value;
		websocket.send(message);
		document.getElementById('text').value = '';
	}
	
	//发送消息
	function sendMsg(message) {
		var id = '<%=request.getSession().getId()%>';
		var msg = message + '##USERID_' + id;
		websocket.send(msg);
	}
</script>
</html>